<template>
	<!-- 按钮 -->
	<view class="btn">
		<view class="button" @touchstart="loginStart" @touchend="loginEnd"
		:style="[loginBtnBg,wC]">
			<text class="text">{{text}}</text>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	
	const props = defineProps({
		text: {
			type: String,
			default: '登录'
		},
		w:{
			type: Number,
			default: 400
		}
	})
	
	const clickBtn = ref(false) // 登录按钮是否处于点击状态中
	const emit = defineEmits(['submit'])
	
	const loginBtnBg = computed(() =>{ // 按钮背景
		if(!clickBtn.value){
			return `background-color: #f7931e;`
		}else{
			return `background-color: #966125;`
		}
	})
	 
	 // 按钮的宽度
	 const wC = computed(() => {
		 return `width: ${props.w}rpx;`
	 })
	 
	const loginStart = () =>{ // 点击登录按钮
		clickBtn.value = true
	}
	
	const loginEnd = () =>{// 松开登录按钮
		clickBtn.value = false
		emit('submit')
	}
</script>

<style lang="less" scoped>
	.btn{
		margin-top: 50rpx;
		.button{
			width: 400rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 30rpx;
			background-color: #f7931e;
			border-radius: 15rpx;
			.text{
				font-size: 30rpx;
			}
		}
		.hoverBtn{
			background-color: red;
		}
	}
</style>